//  轮播图开始
//获取元素
var next_ele = document.querySelector(".next_button");
var prev_ele = document.querySelector(".prev_button");
var pagination_ele = document.querySelectorAll(".pagination_a span");
var wrapper_ele = document.querySelector(".wrapper")
var box = document.querySelector(".banner_box")
    //初始索引
var index = 0;

//绑定事件


prev_ele .addEventListener('click',function(){
    if (index === 0) {
        index = 5;
        wrapper_ele.style.left = -6027 + "px";
    } else {
        index--;
    }
    // console.log(index);
    pager();
})
next_ele .addEventListener('click',function(){
    if (index === 6) {
        index = 1;
        wrapper_ele.style.left = 0;
    } else {
        index++;
    }
    // console.log(index);
    pager();
})
    //分页器遍历划过事件
for (let i = 0; i < pagination_ele.length; i++) {
    pagination_ele[i].onmouseout = function() {
        //解决鼠标停留在一个地方的BUG 
        if (index === i) {
            return false;
        }
        index = i;
        // console.log(index);
        pager();
    }
}
//函数 分页器索引清空
function pager() {
    for (let i = 0; i < pagination_ele.length; i++) {
        pagination_ele[i].className = "";
    }
    pagination_ele[index === 6 ? 0 : index].className = "active";
    move(wrapper_ele, "left", -index * 859);
}

//开启定时器
var t = setInterval(function() {
    //自动播放模拟事件 dispatchEvent是API
    next_ele.dispatchEvent(new Event("click"));
}, 3300);
//鼠标移入就终止执行
box.onmouseover = function() {
        clearInterval(t);
    }
    //移出就开启
box.onmouseout = function() {
        t = setInterval(function() {
            next_ele.dispatchEvent(new Event("click"));
        }, 3300);
    }

    //  轮播图结束
    // body轮播
    //第一个轮播
var wrapper_m = document.querySelector(".wrapper_m")
var btn_you = document.querySelector(".you_btn");
var btn_zou = document.querySelector(".zou_btn");
var index_m = 0;
//鼠标点击事件
btn_you.onclick = function() {
    if (index_m === 4) {
        return
    } else {
        index_m++;
    }
    xaio_guo()
}
btn_zou.onclick = function() {
    if (index_m === 0) {
        return
    } else {
        index_m--;
    }
    xaio_guo()
}

function xaio_guo() {
    move(wrapper_m, "left", -index_m * 271);
}
//第一个轮播结束
//第二个轮播
var wrapper_tow = document.querySelector(".wrapper_tow")
var you_tow = document.querySelector(".you_tow");
var zou_tow = document.querySelector(".zou_tow");
var tow = 0;
//鼠标点击事件
you_tow.onclick = function() {
    if (tow === 4) {
        return
    } else {
        tow++;
    }
    tow_m()
}
zou_tow.onclick = function() {
    if (tow === 0) {
        return
    } else {
        tow--;
    }
    tow_m()
}

function tow_m() {
    move(wrapper_tow, "left", -tow * 271);
}
//第二个轮播结束
//倒计时
function asa() {
    var a = new Date('2021/08/21 23:00:00');
    var r = a.getTime() - Date.now();
    var s = parseInt(r / 1000 % 60); // 不满60的秒数; 
    var m = parseInt(r / 1000 / 60 % 60); // 不足60 的分钟数; 
    var h = parseInt(r / 1000 / 60 / 60 % 24); // 不足24 的小时数; 
    var d = parseInt(r / 1000 / 60 / 60 / 24); // 剩余的天数; 
    if (s < 10) {
        s = '' + 0 + s;
    }
    if (m < 10) {
        m = '' + 0 + m;
    }
    if (h < 10) {
        h = '' + 0 + h;
    }
    var html = `<span class="p1">${h}</span>
                <span class="m">:</span>
                <span class="p1">${m}</span>
                <span class="m">:</span>
                <span class="p1">${s}</span>`
    sj.innerHTML = html;
}
setInterval(asa, 1000);
asa();
//倒计时结束
// 渲染
$(function() {

        // 1. 页面之中所有内容的加载都是异步的; 
        // 2. 我们给元素添加事件的时候都是使用 事件委托实现的; 
        $.ajax({
                url: "../data/data.json"
            })
            .then(function(res) {
                render(res.datas);
            })

        function render(list) {

            $(".sub_cont").html(
                list.map((item) => `
                <div class="details">
                        <p class="ipc"><img src="${ item.pic_url}" alt=""></p>
                        <span class="name_m">${ item.attr_ext.custom_summary}</span>
                        <div class="bot">
                        <p class="pro-info">${ item.name}</p>
                        <p class="pro-price">
                        <span class="pro-unit">¥</span>
                        <span class="m-num">${ item.price/100}</span>
                        </div>
                    </p>
                </div>
            `).join("")
            )
        }
    })
    //渲染结束
// 回到顶部

var ding_m = document.querySelector(".ding_m");
ding_m.onclick = function() {
        scrollTo({
            top: 0,
            //    缓慢向上
            behavior: 'smooth'

        })
    }
    // 回到顶部结束


     // 退出登录
     $('[name="logout"]').click(function(){
        // 先获取 cookie 对象
        const cookieObj = myGetCookie();
  
  
        if( cookieObj.login === '1' ){
          // 证明已经登录
  
          // 设定 login的时效是 负数 直接就是 时效过期
          // 浏览器自动删除这个 cookie
          mySetCookie( 'login' , 0 , -1 , '/' );
            
          $('.m_login_cg').css('display','none')
          window.alert('您已经退出登录了');
  
  
        }else{
          // 还没有登录
          window.alert('您还没有登录,请您先登录');
        }
      });
  
      // 跳转购物车
      $('[name="cart"]').click(function(){
        // 获取 cookie对象
        const cookieObj = myGetCookie();
  
        if( cookieObj.login === '1' ){
          // 已经登录 直接跳转 购物车页面
          window.location.href = '../shopping.html';
        }else{
          if( window.confirm('您还没有登录,点击确定跳转登录页面') ){
            window.location.href = '../the_login.html';
          }
        }
      })
      

       // 点击 商品分类页面
    // 跳转 商品列表页 同时 携带 商品分类参数
    // 点击 标签 跳转 列表页 同时 携带 参数 
    // 键名是 cat_one_id 键值是 标签内容
    $('[name="1"]').click(function(){
        window.location.href = `../list_of.html?cat_one_id=${$(this).html()}`;
      })
  